<style>
    #search-wrapper .inline-input{
        width:100px;
    }
    #search-wrapper .choose-item{
        width: 90px;
    }
    .btn-url,.clicks-row{
        cursor: pointer;
        color:#01AAED;
    }
    .btn-url.btn-url{
        margin:0 20px;
    }
    .layui-form-label{
        width: 100px;
    }
    .layui-layer-page .layui-layer-content{
        padding: 0 20px;
    }
    .layui-input-inline .layui-input{
        width:150px;
    }
    .list-wrapper .layui-table-cell{
        height: auto;
    }
    .imgSpan{
        color: #01AAED;
        cursor: pointer;
    }
    .setClick-wrapper{
        margin-top: 40px;
    }
</style>
<div class="layui-layout layui-layout-admin list-wrapper" style="padding:0 20px;">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset1">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">书籍总数</th>
                    <th style="text-align: center">原创书籍总数</th>
                    <th style="text-align: center">非原创书籍总数</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.totalNum}}</td>
                    <td>{{.totalSign}}</td>
                    <td>{{.totalUnSign}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-col-md4 layui-col-md-offset2">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">男生书籍总数</th>
                    <th style="text-align: center">女生书籍总数</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.maleNum}}</td>
                    <td>{{.femaleNum}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-inline inline-input">
                        <select name="channel" class="channel" lay-verify="">
                            <option value="-1">频道</option>
                            <option value="1">男频</option>
                            <option value="2">女频</option>
                        </select>
                    </div>
                    <div class="layui-inline inline-input">
                        <select name="cat" class="cat" lay-verify="">
                            <option value="-1">分类</option>
                            {{range $index, $elem := .catList}}
                                <option value="{{$elem.Id}}">{{$elem.CategoryFullname}}</option>
                            {{end}}
                        </select>
                    </div>
                    <div class="layui-inline inline-input">
                        <select name="isSign" class="isSign" lay-verify="">
                            <option value="-1">来源</option>
                            <option value="0">非原创</option>
                            <option value="1">原创</option>
                        </select>
                    </div>
                    <div class="layui-inline inline-input">
                        <select name="status" class="status" lay-verify="">
                            <option value="-1">状态</option>
                            <option value="0">更新中</option>
                            <option value="1">已完结</option>
                            <option value="2">未上架</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-md-offset4">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <input class="layui-input name" name="name">
                        </div>
                        <div class="layui-inline choose-item">
                            <select name="nameCat" class="nameCat" lay-verify="">
                                <option value="0">书名</option>
                                <option value="1">作者名</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" data-type="reload">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <button class="layui-btn layui-btn-normal fr export">导出</button>
                </div>
            </div>
        </div>
    </div>

    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script>
    layui.use(['table','form','element'], function(){
        var table = layui.table;
        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/book/table'
            ,where:{value: $('.nameCat').val() + '-' + $('.name').val(),
                channel:$(".channel").val(),
                cat:$(".cat").val(),
                isSign:$(".isSign").val(),
                status:$(".status").val()}
            ,cols: [[
                {field:'orderNum', title: '序号', align:'center',fixed:'left'},
                {field:'id', title: 'ID', align:'center',fixed:'left'},
                {field:'name', title: '书名', align:'center',width:150,fixed:'left'},
                {field:'bookType', title: '类型', align:'center', width:100},
                {field:'author', title: '作者名', align:'center', width:120},
                {field:'channelType', title: '频道', align:'center', width:120,templet: function(d){
                        if (d.channelType == 1){
                            return "男频"
                        }else{
                            return "女频"
                        }
                    }},
                {field:'cat', title: '分类', align:'center', width:150},
                {field:'tag', title: '标签', align:'center', width:150},
                {field:'isSign', title: '来源', align:'center', width:120,templet: function(d){
                        if (d.isSign == 0){
                            return "非原创"
                        }else{
                            return "原创"
                        }
                    }},
                {field:'status', title: '状态', align:'center', width:120},
                {field:'clicks', title: '点击数', align:'center',sort: true, width:120,templet: function(d){
                        return "<div class='clicks-row'><span>" + d.clicks + "</span><i class='layui-icon layui-icon-edit' onclick='setClicks("+d.id + ',' +d.clicks+")'></i>" + "</div>"
                    }},
                {field:'releaseTime', title: '上架时间', align:'center',sort: true, width:180},
                {field:'words', title: '总字数', align:'center',sort: true, width:120},
                {field:'totalChapter', title: '全部章节', align:'center',sort: true, width:120},
                {field:'onlineChapter', title: '上线章节', align:'center',sort: true, width:120},
                {field:'priceSum', title: '总价', align:'center',sort: true, width:120},
                {field:'price', title: '单价', align:'center',sort: true, width:120,templet: function(d){
                        return "<div class='clicks-row'><span>" + d.price + "</span><i class='layui-icon layui-icon-edit' onclick='setPrice("+d.id + ',' +d.price+")'></i>" + "</div>"
                    }},
                {field:'desc', title: '简介一', align:'center', width:150},
                {field:'tip', title: '简介二', align:'center', width:150},
                {field:'', title: '封面', align:'center', width:120,templet: function(d){
                        return "<span class='imgSpan' onmouseleave='hoverImgOut()' onmouseenter='hoverImgIn()' id='cover" + d.id + "' data-src='https://book-98nice.oss-cn-hangzhou.aliyuncs.com/"+ d.ossUrl + "/" + d.serialId +"/cover.jpg?x-oss-process=image/resize,h_100'>查看</span>";
                    }},
                {field:'', title: '轮播图', align:'center', width:120,templet:function(d){
                        return "<span class='imgSpan' onmouseleave='hoverImgOut()' onmouseenter='hoverImgIn()' id='poster" + d.id + "' data-src='https://book-98nice.oss-cn-hangzhou.aliyuncs.com/"+ d.ossUrl + "/" + d.serialId +"/poster.jpg?x-oss-process=image/resize,w_100'>查看</span>"
                    }},
                {field:'', title: '书籍地址', align:'center', width:150,templet: function(d){
                        return "https://yhsy.98nice.com/view/home/book/" + d.serialId + "/yhsy";
                    }},
                {field:'', title: '操作', align:'center', width:200,fixed:'right',templet: function(d){
                        return "<a class='btn-url book-detail' href='/book/detail?id=" + d.id + "'>详情</a><a class='btn-url' href='/book/chapter?id=" + d.id + '&name=' + d.name + '&total=' + d.totalChapter + '&online=' + d.onlineChapter + '&words=' + d.words + '&chapterPriceSum=' + d.chapterPriceSum + "'>章节设置</a>"
                    }}
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        // 选择书名或者作者名
        var active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        value: $('.nameCat').val() + '-' + $('.name').val(),
                        channel:$(".channel").val(),
                        cat:$(".cat").val(),
                        isSign:$(".isSign").val(),
                        status:$(".status").val()
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        $('#search-wrapper .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".export").click(function(){
            var urlParam = "?page=1&limit=99999&value="+$('.nameCat').val() + '-' + $('.name').val()+
                    "&channel="+$(".channel").val()+
                    "&cat="+$(".cat").val()+
                    "&isSign="+$(".isSign").val()+
                    "&status="+$(".status").val()+
                    "&export=1";
            window.open('/book/table'+urlParam)
        });
    });

    function setClicks(id,clicks) {
        layer.open({
            type: 1,
            title:'修改点击数',
            btn: ['确定', '取消'],
            area: ['370px', '200px'],
            content:  `<div class="layui-inline setClick-wrapper">
                           <label class="layui-form-label">线上点击数：</label>
                                <div class="layui-input-inline">
                                <input class="layui-input clicks-input" value=` + clicks +`>
                           </div>
                       </div>`
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                var reg = /^\d+$/;
                var clicks = $('.clicks-input').val();
                if(!reg.test(clicks)){
                    layer.msg("请输入合法数字")
                }else {
                    $.ajax({
                        url: '{{urlfor "BookController.SetClicks"}}',
                        data:{'id':id,'clicks':clicks},
                        type: 'PUT',
                        success: function( response ) {
                            if(response.status == 0){
                                //  测试一下
                                $(".layui-laypage-btn").click();
                                layer.msg(response.message);
                                setTimeout(function(){
                                    layer.closeAll();
                                },500);
                            }else {
                                layer.msg(response.message);
                            }
                        }
                    });
                }
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }





    function setPrice(id,price) {
        layer.open({
            type: 1,
            title:'修改单价数',
            btn: ['确定', '取消'],
            area: ['370px', '200px'],
            content:  `<div class="layui-inline setClick-wrapper">
                           <label class="layui-form-label">单价：</label>
                                <div class="layui-input-inline">
                                <input class="layui-input price-input" value=` + price +`>
                           </div>
                       </div>`
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                var reg = /^\d+$/;
                var price = $('.price-input').val();
                if(!reg.test(price)){
                    layer.msg("请输入合法数字")
                }else {
                    $.ajax({
                        url: '{{urlfor "BookController.SetBookPrice"}}',
                        data:{'bookId':id,'price':price},
                        type: 'PUT',
                        success: function( response ) {
                            if(response.status == 0){
                                //  测试一下
                                $(".layui-laypage-btn").click();
                                layer.msg(response.message);
                                setTimeout(function(){
                                    layer.closeAll();
                                },500);
                            }else {
                                layer.msg(response.message);
                            }
                        }
                    });
                }
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }










    var tipIndex;

    function hoverImgIn() {
        var id = '#' + event.srcElement.id;
        tipIndex = layer.tips("<img src='"+ event.srcElement.dataset.src +"'>", id,{
            tips: 4,
        });
        //console.log(123);
    }

    function hoverImgOut() {
        layer.close(tipIndex);
    }
</script>